<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    :close-on-click-modal="false"
    custom-class="dialog-my"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="myform"
      :label-position="'right'"
      label-width="80px"
      v-loading="loadingState"
    >
      <el-form-item label="场地名称" prop="siteName">
        <el-input
          style="width: 244px"
          v-model="form.siteName"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="sortBy">
        <el-input
          style="width: 244px"
          v-model="form.sortBy"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="场地服务" prop="siteType">
        <el-radio-group v-model="form.siteType" @change="getRaDio">
          <el-radio label="0">无</el-radio>
          <el-radio label="1">VIP</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="关联场地" prop="siteId">
        <el-select
          v-model="form.siteId"
          :disabled="disState"
          placeholder="请选择"
        >
          <el-option label="无关联" value="0"> </el-option>
          <el-option
            v-for="item in siteList"
            :key="item.id"
            :label="item.siteName"
            :value="item.id"
            :disabled="form.id == item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
     
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { sitePageList, siteAdd } from '@/config/api'
export default {
  data () {
    return {
      dialogFormVisible: false,
      title: '',
      siteList: [],
      loadingState: false,
      form: { siteName: undefined, sortBy: undefined, siteType: undefined, siteId: undefined, regionId: undefined},
      rules: {
        siteName: [
          { required: true, message: '请输入场地名称', trigger: 'blur' }],
        siteType: [
          { required: true, message: '请选择场地服务', trigger: 'change' }
        ],
        sortBy: [
          { required: true, message: '请输入排序', trigger: 'blur' }
        ],
        siteId: [
          { required: true, message: '请选择场地', trigger: 'blur' }
        ],
     
      },
      disState: false
    }
  },
  methods: {
    addShow (id) {
      this.resetFields()
      this.title = '新增场地'
      this.dialogFormVisible = true
      this.form.regionId = id
      this.getSite(id)
    },
    editShow (item) {
      this.resetFields()
      this.getSite(item.regionId)
      console.log(item)
      this.title = '编辑场地'
      this.form = { "siteName": item.siteName, "sortBy": item.sortBy, "siteType": item.siteType, "siteId": item.siteId || '0', "regionId": item.regionId, id: item.id}
      this.dialogFormVisible = true
    },
    getSite (regionId) {
      sitePageList({ page: 1, pageSize: 20, regionId }).then(res => {
        this.siteList = res.data.result.list
      })
    },
    resetFields () {
      this.form = { "siteName": undefined, "sortBy": undefined, "siteType": undefined, "siteId": undefined, "regionId": undefined }
    },
    getRaDio (e) {
      console.log(e)
      if (e == 0) {
        this.disState = true
        this.form.siteId = '0'
      } else {
        this.disState = false
        this.form.siteId = undefined
      }
    },
    submit () {
      this.$refs['myform'].validate((valid) => {
        if (valid) {
          this.loadingState = true
          siteAdd(this.form).then(res => {
            this.$parent.getData()
            this.dialogFormVisible = false
            this.loadingState = false
            this.$message({
              message: '操作成功',
              type: 'success'
            });
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
}
</script>
<style>
</style>
